//
// Note that these are all defined as panel configs, rather than instantiated
// as panel objects.  You could just as easily do this instead:
//
// var absolute = Ext.create('Ext.Panel', { ... });
//
// However, by passing configs into the main container instead of objects, we can defer
// layout AND object instantiation until absolutely needed.  Since most of these panels
// won't be shown by default until requested, this will save us some processing
// time up front when initially rendering the page.
//
// Since all of these configs are being added into a layout container, they are
// automatically assumed to be panel configs, and so the xtype of 'panel' is
// implicit.  To define a config of some other type of component to be added into
// the layout, simply provide the appropriate xtype config explicitly.
//
function getBasicLayouts() {
    // This is a fake CardLayout navigation function.  A real implementation would
    // likely be more sophisticated, with logic to validate navigation flow.  It will
    // be assigned next as the handling function for the buttons in the CardLayout example.
	
	var textArea;
    
    Ext.define('Ext.chart.theme.CustomBlue', {
        extend: 'Ext.chart.theme.Base',
        
        constructor: function(config) {
            var titleLabel = {
                font: 'bold 18px Arial'
            }, axisLabel = {
                fill: 'rgb(8,69,148)',
                font: '12px Arial',
                spacing: 2,
                padding: 5
            };
            
            this.callParent([Ext.apply({
               axis: {
                   stroke: '#084594'
               },
               axisLabelLeft: axisLabel,
               axisLabelBottom: axisLabel,
               axisTitleLeft: titleLabel,
               axisTitleBottom: titleLabel
           }, config)]);
        }
    });

    var dayTopChart = Ext.define('Ext.chart.MyChart', {
    	extend: 'Ext.chart.Chart',
    	width: 800,
    	height: 500,
        animate: true,
        shadow: true,
        store: store1,
        axes: [{
            type: 'Numeric',
            position: 'bottom',
            fields: ['data1'],
            label: {
                renderer: Ext.util.Format.numberRenderer('0,0')
            },
            title: '订购数量',
            grid: true,
            minimum: 0
        }, {
            type: 'Category',
            position: 'left',
            fields: ['name'],
            title: '菜式名称'
        }],
        theme: 'CustomBlue',
        background: {
          gradient: {
            id: 'backgroundGradient',
            angle: 45,
            stops: {
              0: {
                color: '#ffffff'
              },
              100: {
                color: '#ffffff'
              }
            }
          }
        },
        series: [{
            type: 'bar',
            axis: 'bottom',
            highlight: true,
            tips: {
              trackMouse: true,
              width: 140,
              height: 28,
              renderer: function(storeItem, item) {
                this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1') + ' 份');
              }
            },
            label: {
              display: 'insideEnd',
                field: 'data1',
                renderer: Ext.util.Format.numberRenderer('0'),
                orientation: 'horizontal',
                color: '#333',
              'text-anchor': 'middle'
            },
            xField: 'name',
            yField: ['data1'],
            renderer: function(sprite, record, attr, index, store) {
	            var fieldValue = Math.random() * 20 + 10;
	            var value = (record.get('data1') >> 0) % 5;
	            var color = ['rgb(213, 70, 121)', 
	                         'rgb(44, 153, 201)', 
	                         'rgb(146, 6, 157)', 
	                         'rgb(49, 149, 0)', 
	                         'rgb(249, 153, 0)'][value];
	            return Ext.apply(attr, {
	                fill: color
	            });
	        }
        }]
    });
    
    Ext.define('Ext.chart.MyLineChart', {
    	extend: 'Ext.chart.Chart',
    	width: 800,
    	height: 500,
        style: 'background:#fff',
        animate: true,
        store: store2,
        shadow: true,
        theme: 'Category1',
        legend: {
            position: 'right'
        },
        axes: [{
            type: 'Numeric',
            minimum: 0,
            position: 'left',
            fields: ['data1'],
            title: '销售额',
            minorTickSteps: 1,
            grid: {
                odd: {
                    opacity: 1,
                    fill: '#ddd',
                    stroke: '#bbb',
                    'stroke-width': 0.5
                }
            }
        }, {
            type: 'Category',
            position: 'bottom',
            fields: ['name'],
            title: '日期'
        }],
        series: [{
            type: 'line',
            highlight: {
                size: 7,
                radius: 7
            },
            axis: 'left',
            xField: 'name',
            yField: 'data1',
            markerConfig: {
                type: 'cross',
                size: 4,
                radius: 4,
                'stroke-width': 0
            },
            title:'销售额'
        }]
    });
    
    var myChartBuyDay = Ext.create('Ext.chart.MyChart');
    var myChartBuyWeek = Ext.create('Ext.chart.MyChart', {
    	store: store2
    });
    var myChartBuyMonth = Ext.create('Ext.chart.MyChart', {
    	store: store3
    });
    
    var myLineChartByWeek = Ext.create('Ext.chart.MyLineChart', {
    	store: store4
    });
    var myLineChartByMonth = Ext.create('Ext.chart.MyLineChart', {
    	store: store5
    });

    var cardNav = function(incr){
        var l = Ext.getCmp('card-wizard-panel').getLayout();
        var i = l.activeItem.id.split('card-')[1];
        var next = parseInt(i, 10) + incr;
        l.setActiveItem(next);
        Ext.getCmp('card-prev').setDisabled(next===0);
        Ext.getCmp('card-next').setDisabled(next===2);
    };
    return {
        /*
         * ================  Start page config  =======================
         */
        // The default start page, also a simple example of a FitLayout.
        start: {
            id: 'start-panel',
            title: '欢迎',
            layout: 'fit',
            bodyStyle: 'padding:25px',
            contentEl: 'start-div'  // pull existing content from the page
        },

        /*
         * ================  AbsoluteLayout config  =======================
         */
        absolute: {
            id: 'absolute-panel',
            title: '昨天菜式购买量的前10名',
            layout: 'absolute',
            defaults: {
                bodyStyle: 'padding:15px;',
                width: 200,
                height: 100,
                frame: true
            },
            items: myChartBuyDay
        },

        /*
         * ================  AccordionLayout config  =======================
         */
        accordion: {
            id: 'accordion-panel',
            title: '上周菜式购买量的前10名',
            layout: 'absolute',
            defaults: {
                bodyStyle: 'padding:15px;',
                width: 200,
                height: 100,
                frame: true
            },
            items: myChartBuyWeek
        },

        /*
         * ================  AnchorLayout config  =======================
         */
        anchor: {
            id:'anchor-panel',
            title: '上月菜式购买量的前10名',
            layout: 'absolute',
            defaults: {
                bodyStyle: 'padding:15px;',
                width: 200,
                height: 100,
                frame: true
            },
            items: myChartBuyMonth
        },

        /*
         * ================  BorderLayout config  =======================
         */
        border: {
            id:'border-panel',
            title: '上周营业额',
            layout: 'absolute',
            defaults: {
                bodyStyle: 'padding:15px;',
                width: 200,
                height: 100,
                frame: true
            },
            items: myLineChartByWeek
        },

        /*
         * ================  CardLayout config (TabPanel)  =======================
         */
        // Note that the TabPanel component uses an internal CardLayout -- it is not
        // something you have to explicitly configure.  However, it is still a perfect
        // example of how this layout style can be used in a complex component.
        cardTabs: {
            id: 'card-tabs-panel',
            title: '上月营业额',
            layout: 'absolute',
            defaults: {
                bodyStyle: 'padding:15px;',
                width: 200,
                height: 100,
                frame: true
            },
            items: myLineChartByMonth
        }
    };
}
